<template>
	<Reply ref="reply" @upDate="upDate" />
	<view class="trendsDetail ph-24 pb-150"  v-if="detail">
		<view :style="{ paddingTop: statusBarHeight + 'px' }" class="hearder">
			<view class="h-88 ph-32 f ai-c jc-s-b">
				<view class="f ai-c">
					<image src="../../static/back.png" class="w-40 h-40 mr-32" @click="toBack"></image>
					<u-avatar :src="detail.avatar" size="64rpx"></u-avatar>
					<view class="ml-16 fs-30 fw-690 text-color4 ml-32">{{ detail.memberNickname }}</view>
				</view>
				<view class="f ai-c mp-weixin">
					<view class="w-120 h-56 b-56 fs-26 text-color f ai-c jc-c care mr-32" @click="followUser">{{
                        detail.folowUserEnabled==true ? '已关注' : '关注'
                    }}</view>
					<button type="default" style="border: none;padding: 0;margin: 0;width: 40rpx;" plain open-type="share">
						<image src="http://cwht.ricecs.cn/app/shop/share-h.png" class="w-40 h-40"></image>
					</button>
				</view>
			</view>
		</view>
		<view :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="w-f h-112"></view>
		</view>
		<u-swiper :list="detail.urls" height="468" radius="12" @change="getCurrentNum" :autoplay="false"
			indicatorStyle="right: 20px">
			<template v-slot:indicator>
				<view class="currentNum w-73 h-40 f ai-c jc-c">
					<text class="fs-24 fw-600 text-color5">{{ currentNum + 1 }}/{{ detail.urls.length }}</text>
				</view>
			</template>
		</u-swiper>
		<view class="ph-8">
			<view class="mt-32 ph-8 fs-32 fw-600 text-color4">{{ detail.title }}</view>
			<view class="mt-12 fs-28 text-color4">{{ detail.content }}</view>
			<view class="mt-24 fs-24 text-color3 pb-33 time">{{ detail.updateTime }} {{ detail.address }}</view>
		</view>
		<view class="mt-32 fs-28 text-color2">共<text class="fw-600">{{ detail.commentCount }}</text> 条评论</view>
		<view class="f ai-c jc-s-b mt-38 mb-8">
			<image :src="userInfo.avatar" v-if="userInfo" class="w-72 h-72 b-72 mr-24"></image>
			<view class="w-f h-72 ph-28 input b-72 f ai-c f1" @click="comment">
				<u--input placeholder="我来发表…" border="none" v-model="commentContent" fontSize="12"
					:placeholderStyle="{ color: '#999999' }" readonly></u--input>
			</view>
		</view>
		<view class="f jc-s-b mt-24" v-for="(item, index) in list" :key="index">
			<u-avatar :src="item.avatar" size="72rpx"></u-avatar>
			<view class="info pb-25 f f1 fd-c ml-20">
				<view class="f jc-s-b f1">
					<view class="f f1 mr-32 fd-c" @click="handleReply(item)">
						<view class="fs-28 text-color3">{{ item.memberNickname }}</view>
						<view class="fs-28 text-color4 mt-4">{{ item.commentContent }}</view>
						<view class="f ai-c mt-8">
							<view class="mr-8 fs-24 text-color3">{{item.updateTime}}
								{{item.city}}
							</view>
							<view class="fs-24 text-color2">回复</view>
						</view>
					</view>
					<view @click="commentZan(item,index)">
						<image src="http://cwht.ricecs.cn/app/novice/zaned.png" class="w-32 h-32 mb-8" v-if="item.likeFlag"></image>
						<image src="http://cwht.ricecs.cn/app/novice/zan.png" class="w-32 h-32 mb-8" v-else></image>
						<view class="fs-20 text-color3">{{item.commentLikeCount}}</view>
					</view>
				</view>
				<!-- 下级回复 -->
				<view v-if="item.childes">
					<view class="f jc-s-b mt-24" v-for="(item2,index2) in item.childes">
						<u-avatar :src="item2.avatar" size="48rpx"></u-avatar>
						<view class="f jc-s-b f1 ml-20">
							<view class="f f1 mr-32 fd-c">
								<view class="fs-28 text-color3">{{ item2.memberNickname }}</view>
								<view class="fs-28 text-color4 mt-4">{{ item2.commentContent }}</view>
								<view class="f ai-c mt-8">
									<view class="mr-8 fs-24 text-color3">{{getTime(item2.updateTime)}}
										{{item2.city}}
									</view>
								</view>
							</view>
							<view @click="commentZan(item2,index2)">
								<image src="http://cwht.ricecs.cn/app/novice/zaned.png" class="w-32 h-32 mb-8" v-if="item2.likeFlag"> </image>
								<image src="http://cwht.ricecs.cn/app/novice/zan.png" class="w-32 h-32 mb-8" v-else></image>
								<view class="fs-20 text-color3">{{item2.commentLikeCount}}</view>
							</view>
						</view>
					</view>
					<!-- <view class="fs-24 text-color mt-12 ml-68" v-if="item2.childes">展开 {{item2.childes.length}} 条回复</view> -->
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f" style="flex: 999;z-index: 9999;">
			<view class="f ai-c jc-s-b ph-32 h-100">
				<view class="w-400 h-72 b-72 pl-28 input f ai-c" @click="comment">
					<image src="http://cwht.ricecs.cn/app/novice/edit.png" class="w-28 h-28 mr-12"></image>
					<!-- <u--input
                        placeholder="说点什么吧…"
                        border="none"
                        v-model="commentContent"
                        fontSize="12"
                        :placeholderStyle="{ color: '#CCCCCC' }"
                        readonly
                    ></u--input> -->

				</view>
				<view class="f ai-c f1 jc-f-e">
					<image src="http://cwht.ricecs.cn/app/novice/collected.png" class="w-50 h-50 mr-12" @click.stop="handleFollow"
						v-if="detail.followEnabled">
					</image>
					<image src="http://cwht.ricecs.cn/app/novice/collect.png" class="w-50 h-50 mr-12" @click.stop="handleFollow"
						v-else>
					</image>
					<view class="fs-28 fw-600 mr-42" :class="detail.followEnabled ? 'text-color' : 'text-color4'"
						@click.stop="handleFollow">{{
                        detail.followCount
                    }}</view>
					<image src="http://cwht.ricecs.cn/app/novice/zaned.png" class="w-40 h-40 mr-12" @click.stop="handleZan"
						v-if="detail.likeEnabled"></image>
					<image src="http://cwht.ricecs.cn/app/novice/zan.png" class="w-40 h-40 mr-12" @click.stop="handleZan" v-else>
					</image>
					<view class="fs-28 fw-600" :class="detail.likeEnabled ? 'text-color' : 'text-color4'" @click.stop="handleZan">
						{{ detail.likeCount }}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script setup lang="ts">
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
	import { contentDetail, commentGet, commentLike, commentUnLike, likeIncrese, likeDecrese, followIncrese, followDecrese, contentFollow, contentUnfollow } from '@/services/api/novice';
	import Reply from './components/Reply.vue';
	import { ref, getCurrentInstance, onMounted } from 'vue';
	import { useAuthStore } from '@/store/modules/auth';
	const { proxy } = getCurrentInstance();
	const authStore = useAuthStore();
	const userInfo = ref();
	const text = ref('');
	const currentNum = ref(0);
	const reply = ref();
	const show = ref(0);
	const id = ref<number>();
	const detail = ref<any>();
	const list = ref<any[]>([]);

	onLoad((options : any) => {
		userInfo.value = authStore.getUserInfo;
		if (options.show) {
			show.value = 1
		}

		id.value = options.id;
		getDetail();
		getList();
	});
	onMounted(() => {
		if (show.value == 1) {
			reply.value.getShow(id.value, '说点什么吧...');
		}
	})
	onShareAppMessage((res : any) => {
		if (res.from === 'button') {
			// 判断分享是否来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: detail.value.title,
			path: `/pages_novice/trendsDetail?id=${id.value}`,
		};
	});
	function upDate() {
		getDetail();
		getList();
	}
	function getTime(time : number) {
		return proxy.$moment(time).format('YYYY/MM/DD HH:MM')
	}
	//用户关注
	async function followUser() {
		detail.value.folowUserEnabled = !detail.value.folowUserEnabled;
		if (detail.value.folowUserEnabled) {
			await contentFollow({ id: detail.value.memberId, userId: detail.value.memberId });
		} else {
			await contentUnfollow({ id: detail.value.memberId, userId: detail.value.memberId });
		}
		getDetail();
	}
	//关注
	async function handleFollow() {
		detail.value.followEnabled = !detail.value.followEnabled;
		if (detail.value.followEnabled) {
			await followIncrese({ id: id.value, followedId: detail.value.memberId });
		} else {
			await followDecrese({ id: id.value, followedId: detail.value.memberId });
		}
		getDetail();
	}
	//赞
	async function handleZan() {
		detail.value.likeEnabled = !detail.value.likeEnabled;
		if (detail.value.likeEnabled) {
			await likeIncrese({ id: id.value });
		} else {
			await likeDecrese({ id: id.value });
		}
		getDetail();
	}

	//赞
	async function commentZan(item : any, index : number) {
		// detail.value.likeEnabled = !detail.value.likeEnabled;
		if (item.likeFlag) {
			await commentUnLike(item.id);
		} else {
			await commentLike({ commentId: item.id });
		}
		getList();
	}
	//获取评价
	async function getList() {
		const { data } = await commentGet({ contentId: id.value });
		data.forEach((item : any) => {
			item.updateTime = proxy.$moment(item.updateTime).format('YYYY/MM/DD HH:MM');
		});
		list.value = data;
	}
	//详情
	async function getDetail() {
		const { data } = await contentDetail({ id: id.value });
		data.updateTime = proxy.$moment(data.updateTime).format('YYYY/MM/DD HH:MM');
		data.urls = data.urls.split(',');
		detail.value = data;

	}
	const getCurrentNum = (e : any) => {
		currentNum.value = e.current;
	};
	//评论
	const comment = () => {
		reply.value.getShow(id.value, '说点什么吧...');
	};
	//回复
	function handleReply(item : any) {
		reply.value.getShow(id.value, `回复 @${item.memberNickname}`, Number(item.id));
	}
	//头部
	const systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	const toBack = () => {
		let pages = getCurrentPages()
		if(pages.length>1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url: '/pages/novice/index'
			})
		}
	};
	//底部安全距离
	let safeArea = systemInfo.safeArea;
	let screenHeight = systemInfo.screenHeight;
	let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
	::v-deep button {
		padding: 0;
		margin: 0;
		background-color: #fff;
		line-height: 0;
		width: 64rpx;
	}

	.trendsDetail {
		.bot {
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;
			border-top: 1px solid #f0f0f0;
		}

		.info {
			border-bottom: 1rpx solid #f0f0f0;
		}

		.input {
			background: #f8f8f8;
			border: 1rpx solid #dddddd;
		}

		.time {
			border-bottom: 1px solid #f5f5f5;
		}

		.currentNum {
			background: rgba(0, 0, 0, 0.4);
			border-radius: 20rpx;
		}

		.care {
			border: 1rpx solid #fabb3c;
		}

		.hearder {
			background: #fff;
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 111;
		}
	}
</style>